<div id="user-info">
    <form action="post" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">性別:</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="男" title="男" v-model="userInfo.sex">
                <input type="radio" name="sex" value="女" title="女" v-model="userInfo.sex">
                <input type="radio" name="sex" value="其它" title="其它" v-model="userInfo.sex">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">用戶名:</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="username" v-model="userInfo.username" title="用戶名" disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱:</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="email" v-model="userInfo.email" title="邮箱">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">昵称:</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="nick_name" v-model="userInfo.nick_name" title="昵称">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">最后登录:</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="last_login" :value="userInfo.last_login" title="最后登录时间"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">文章数量:</label>
            <div class="layui-input-block">
                <input class="layui-input" type="text" name="article_number" :value="userInfo.article_number"
                       title="文章数"
                       disabled>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">我的广告:</label>
            <div class="layui-input-block">
                <textarea class="layui-textarea" name="ad" :value="userInfo.ad" title="我的推广"></textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <div class="layui-input-block">
                <button class="layui-btn" type="submit" lay-submit="" lay-filter="userSave">保存</button>
            </div>
        </div>
    </form>
</div>

<script>
  layui.use('form', function () {
    var form = layui.form
    let username = document.URL.split('?')[0].split('/').pop()

    var userInfoVm = new Vue({
        el: '#user-info',
        data: {
          userInfo: {},
        },
        beforeCreate () {

        },
        created () {
          axios.get('/user-info/' + username).then((response) => {
            this.userInfo = response.data
          })
        },
        updated () {
          form.render()
        }
      }
    )

    form.on('submit(userSave)', function (data) {
      let username = data.field.username
      axios.post('/user-info/' + username, data.field, {
        headers: {
          'X-CSRFToken': CsrfToken()
        }
      }).then(function (res) {
        layer.msg('保存完成')
      })
      return false
    })
  })

</script>